<template>
  <div class="content">
    <div>
      <van-nav-bar
        class="nav-bar-style"
        title="单据详情"
        v-model="isClickSelectStoreLocation"
        @click-right="showSlectStoreLocation"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #title>
          <div class="nav-bar-title-style">单据详情</div>
        </template>

        <template #left>
          <van-icon size="30" name="arrow-left" color="#FFF" />
        </template>
      </van-nav-bar>
    </div>

    <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          :offset="offset"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onRefresh"
        >
          <van-cell>
            <div>
              <ul>
                <li
                  class="totoalItemStyle"
                  v-for="(item,index) in inStoreageDetailList"
                  :key="index"
                >
                  <div class="itemLeft">
                    <div class="leftLi">
                      <div class="title">单据号&emsp;</div>
                      <div class="desc">{{item.code}}</div>
                    </div>
                    <div class="leftLi">
                      <div class="title">物料名称</div>
                      <div class="desc">{{item.materialName}}</div>
                    </div>
                    <div class="leftLi">
                      <div class="title">物料编号</div>
                      <div class="desc">{{item.materialCode}}</div>
                    </div>
                    <div class="leftLi">
                      <div class="title">物料数量</div>
                      <div class="desc">{{parseInt(item.number)}}</div>
                    </div>
                  </div>
                  <div class="itemRightButtonStyle">
                    <van-button
                      round
                      type="primary"
                      @click="skipToInStorageMaterialDetail(item)"
                      size="large"
                    >开始入库</van-button>
                  </div>
                </li>
              </ul>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>

    <div class="scan-outside-div-style" v-show="false">
      <div class="scan-div-style">
        <van-button class="scan-btn-style" round @click="scan">扫</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import http from "@/utils/request.js";
import api from "@/utils/api";
import { List } from "vant";
import { PullRefresh } from "vant";
import { NavBar } from "vant";
import router from "@/router";
import Toast from "@/utils/toast";
import { TreeSelect } from "vant";
import { Overlay } from "vant";
import { DropdownMenu, DropdownItem } from "vant";
import { Picker } from "vant";

Vue.use(List);
Vue.use(PullRefresh);
Vue.use(NavBar);
Vue.use(TreeSelect);
Vue.use(Overlay);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Picker);

export default {
  data() {
    return {
      sourceCode: "",
      isShowSelectStoreLocation: false,
      sampleDataList: [
        {
          text: "浙江",
          children: [
            {
              text: "杭州",
              children: [{ text: "西湖区" }, { text: "余杭区" }]
            },
            {
              text: "温州",
              children: [{ text: "鹿城区" }, { text: "瓯海区" }]
            }
          ]
        },
        {
          text: "福建",
          children: [
            {
              text: "福州",
              children: [{ text: "鼓楼区" }, { text: "台江区" }]
            },
            {
              text: "厦门",
              children: [{ text: "思明区" }, { text: "海沧区" }]
            }
          ]
        }
      ],

      storeDataList: [],
      inStoreageDetailList: [],
      warehouseOrderNo: "",
      value1: "something",
      value2: "here",
      option: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 }
      ],
      storageRegions: [],
      isClickSelectStoreLocation: false,
      show: false,
      regionActivieId: 0,
      shelfActiveId: 1,

      page: 1, //请求第几页
      pageSize: 10, //每页请求的数量
      total: 0, //总共的数据条数
      offset: 0,
      offset: 0,
      loading: false,
      finished: false,
      refreshing: false,
      dataList: [
        {
          id: "RK000002323344",
          name: "具体名名称",
          number: "232323",
          count: 2
        }
      ]
    };
  },
  methods: {
    onConfirmSelectStoreLocation(storeValues, storeIndexs) {
      this.isShowSelectStoreLocation = false;
      /*
      storeValues is 仓库1,库区6,货架10
      storeIndexs is 0,0,0
      */

      let areaIndex = storeIndexs[0];
      let regionIndex = storeIndexs[1];
      let shelfIndex = storeIndexs[2];

      console.log(" first  **********");
      console.log(areaIndex);
      console.log(" second  **********");
      console.log(regionIndex);
      console.log(" thirdIndex  **********");
      console.log(shelfIndex);

      let storeArea = this.storeDataList[areaIndex];
      let storeRegionArray = storeArea.children;
      let storeRegion = storeRegionArray[regionIndex];
      let storeShelfArray = storeRegion.children;

      let storeAreadId = storeArea.id;
      let storeRegionId = storeRegion.id;
      let storeShelfId = storeShelfArray[shelfIndex].id;

      console.log("仓库ID " + storeAreadId);
      console.log("库区ID " + storeRegionId);
      console.log("货架ID " + storeShelfId);
    },
    showSlectStoreLocation() {
      this.isShowSelectStoreLocation = true;
    },

    skipToInStorageMaterialDetail(item) {
      console.log("skip item  batch code is " + item.batchCode);
      let sendBatchCode = item.batchCode;
      this.$router.push({
        path: "/inStorageMaterialDetail",
        query: {
          batchCode: sendBatchCode
        }
      });
    },

    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.loading = true;
      this.getInStorageDetailList();
    },

    getInStorageDetailList() {
      this.inStoreageDetailList = [];
      let param = { sourceCode: this.sourceCode };
      http
        .fetchGet(api.inStorageDetail, param, "正在加载入库单详情")
        .then(response => {
          response.data.forEach(item => {
            this.inStoreageDetailList.push(item);
          });
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
        })
        .catch(err => {
          console.log(" err  is here " + err);
          this.finished = true;
          this.loading = false;
          this.refreshing = false;
          this.count++;
        });
    },

    onClickSelectLeft(index) {
      this.regionActivieId = index;
    },
    onClickSelectRight(data) {
      this.shelfActiveId = data.id;
    },
    onClickLeft() {
      router.push({ path: "/inStorage" });
    },
    onClickRight() {
      if (!this.isClickSelectStoreLocation) {
        this.isClickSelectStoreLocation = true;
      } else {
        this.isClickSelectStoreLocation = false;
      }
    },
    scan() {
      window.AndroidWebView.scan();
    },

    searchBarCode(barCode) {
      let param = {
        keyword: barCode
      };
      http
        .fetchGet(api.searchBarCode, param)
        .then(response => {
          response.data.forEach(item => {
            item.text = item.name;
            shelfChildren.push(item);
          });
        })
        .catch(err => {
          console.log(" err  is here " + err);
        });
    }
  },
  created() {
    let quredSourceCode = this.$route.query.sourceCode;
    console.log("qured  sourceCode is " + quredSourceCode);
    if (typeof quredSourceCode == "undefined") {
      this.sourceCode = window.localStorage.getItem("sourceCode");
    } else {
      this.sourceCode = quredSourceCode;
      window.localStorage.setItem("sourceCode", this.sourceCode);
    }
  },
  mounted() {}
};
</script>

<style scoped>
.totoalItemStyle {
  border-bottom: 1px solid #dcdcdc;
  display: flex;
  padding: 8px;
  flex-shrink: 1;
  font-size: 20px;
  align-items: flex-start;
  background-color: #fff;
  margin-top: 20px;
  flex-grow: 1;
  width: 100%;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: center;
}
.itemLeft {
  width: auto;
  width: 65%;
}
.itemRightButtonStyle {
  text-align: flex-end;
  width: auto;
  align-items: flex-end;
  margin-right: 25px;
  width: 20%;
}
.leftLi {
  display: flex;
  width: auto;
  line-height: 40px;
  /* word-break: keep-all;
  white-space: nowrap;
  overflow: hidden; */
  text-overflow: ellipsis;
}
.title {
  flex-wrap: nowrap;
  color: #999999;
  min-width: 30%;
}
.desc {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  margin-left: 20px;
  /* width: 50%; */
  /* word-break: keep-all;
  white-space: nowrap;
  overflow: hidden; */
  text-overflow: ellipsis;
  color: #333333;
}
.btn {
  height: 36px;
  line-height: 36px;
  min-width: 100px;
  border-radius: 50px;
}

.van-button--primary {
  background-color: #fff;
  border: 1px solid rgba(71, 124, 236, 1);
  color: rgba(71, 124, 236, 1);
  height: 35px;
}
.nar-bar-parent-style {
  display: flex;
  justify-content: space-between;
}
.nav-bar-title-style {
  font-size: 22px;
  text-align: center;
  font-family: PingFangSC-Regular;
  color: #fff;
  margin-right: 62px;
}

.nav-bar-title-right-style {
  font-size: 20px;
  margin-top: 5px;
  font-family: PingFangSC-Regular;
  text-align: center;
  margin-bottom: 11px;
  color: rgba(71, 124, 236, 1);
}
.nav-bar-style {
  /* width: 64px;
  height: 42px; */
  font-size: 30px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  background: #2e71ff;
}

.scan-outside-div-style {
  position: fixed;
  bottom: 220px;
  width: 100%;
  height: auto;
  margin: auto;
}
.scan-div-style {
  width: 162px;
  height: 162px;
  background: rgba(222, 233, 255, 1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.scan-btn-style {
  width: 122px;
  height: 122px;
  color: white;
  background-color: #477cec;
  margin: auto;
  font-size: 48px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 59px;
  letter-spacing: 2px;
}
.out-detail-style {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.over-flow-style {
  width: 100%;
  height: 1200px;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0.6;
}
.confirmStyle {
  font-size: 20px;
  align-self: center;
  padding: 10px;
}
.pickerToobarStyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #477cec;
}
.pickerToolbarContent {
  display: flex;
  align-items: center;
}
.pickerToolbarContentButton {
  padding-left: 10px;
  padding-right: 10px;
  align-items: center;
}
.nav-bar-style {
  background: #2e71ff;
  color: #fff;
}
</style>
